import React, { Component } from "react";
import { Spin, Form, Tag } from "antd";
import { connect } from "dva";
import SelectModal from "../../labelManager/components/SelectModal";
// import SelectModal from "../../../recommendCenter/add/components/TargetSelectModal";
import styles from "./UseObject.less";

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

@connect(stores => ({
  coldata: stores.user,
  sceneData: stores.addScene,
  dataSourceData: stores.dataSource,
  orgList: stores.adddataSource,
  personDep: stores.personSelectModel
}))
@Form.create()
class UseObject extends Component {

  state= {
    manager: [],
    managerName: [],
    selectVisible: false,
    borderVisible: false,
  }

  componentDidMount() {
    const { uObj, form } = this.props;
    if (uObj) { // 编辑
      const manager = uObj.map(item => item.key);
      const managerName = uObj.map(item => item.name);
      this.setState({ 
        managerName, 
        manager,
      });
      form.setFieldsValue({ isTip: Math.random()});
    }
  }

  confirm = (e, desc) => {
    this.setState({ 
      selectVisible: false, 
      managerName: desc, 
      manager: e,
      borderVisible: false,
    });
    const { handleUseObject, form } = this.props;
    handleUseObject(desc, e);
    form.setFieldsValue({ isTip: Math.random()});
  };

  closeModal = () => {
    this.changeVisible(false);
  };

  changeVisible = (param) => {
    this.setState({ selectVisible: param });
  };

  handleBorderVisible = (param) => {
    this.setState({
      borderVisible: param,
    });
  }

  onCloseTag = (e, indexs) => {
    e.stopPropagation();
    const { form } = this.props;
    const { manager, managerName } = this.state;
    const id = manager.filter((item, index) => index !== indexs);
    const desc = managerName.filter((item, index) => index !== indexs);
    form.setFieldsValue({ isTip: id.length ? Math.random() : null});
    this.setState({
      manager: id,
      managerName: desc,
      borderVisible: !id.length,
    });
  };

  renderTag = () => {
    const { managerName, manager } = this.state;
    const tag = managerName.length <= 0 ? 
      <span className={styles.errTip}>请选择使用对象</span>
     : 
      managerName.map((item, index) => (
        <Tag
          closable
          key={manager[index]}
          onClose={(e) => this.onCloseTag(e, index)}
          className={styles.tagStyle}
        >
          {item}
        </Tag>
      ));
    return tag;
  }

  render() {
    const { form, sceneData } = this.props;
    const { manager, managerName, selectVisible, borderVisible } = this.state;
    const { loading = false } = sceneData;
    return (
      <div className={styles.root}>
        {selectVisible ?
          <SelectModal
            title="请选择使用对象"
            select={manager}
            selectdesc={managerName}
            closeModal={this.closeModal}
            confirm={this.confirm}
            visible
            isMutiple
          />
          : null
        }
        <Spin spinning={this.state.loadingEdit || loading}>
        <div className={`${styles.top} ${styles.bottom}`}>
            <div className={styles.title}>标签授权</div>
            <div className={styles.basic}>
              <div className={styles.choice4}>
              <Form {...formItemLayout}>
                <FormItem label="使用对象">
                  {form.getFieldDecorator("isTip", {
                    rules: [{ required: true, message: "使用对象不能为空" }],
                  })(
                    <div className={borderVisible ? styles.addressErr : styles.address}
                      onClick={() => this.changeVisible(true)}
                    >
                     {this.renderTag()}
                    </div>,
                  )}
                  </FormItem>
                </Form>
              </div>
            </div>
          </div>
        </Spin>
      </div>
    );
  }
}

export default UseObject;
